<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-select @change="changeShop" v-model="dataForm.selectshopid" placeholder="校区" style="width:130px;height:50px">
          <!-- <el-option label="全部" value=""></el-option> -->
          <el-option v-for="(item, index) in shopids" :label="item.shopName" :key="item.shopName" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="dataForm.selectcourseid" placeholder="课程" style="width:100px;height:50px">
          <el-option v-for="(item, index) in courseList" :label="item.name" :key="item.name" :value="item.id"></el-option>
        </el-select>
        <div style="float: right">
          <el-input style="width:150px;height:50px" v-model="dataForm.key" placeholder="学生/家长姓名" clearable></el-input>
          <el-input style="width:140px;height:50px" v-model="dataForm.tel" placeholder="手机号" clearable></el-input>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList(1)">查询</el-button>
        <el-button @click="roloadDataList()">重置</el-button>
        <el-button v-if="isAuth('business:student:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('business:student:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        <el-button @click="download()" type="primary">下载模板</el-button>
      </el-form-item>
      <el-button size="small" type="primary" @click="studentupload()">批量导入学员信息</el-button>
      <el-button v-if="isAuth('business:student:exportExcel')" size="small" type="warning" @click="exportExcel()" >导出Excel</el-button>
    </el-form>
    <el-table @sort-change="sortByCreateTime" :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <!--<el-table-column-->
      <!--prop="id"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="编号">-->
      <!--</el-table-column>-->
      <el-table-column prop="shopName" header-align="center" align="left" label="校区" width="150">
      </el-table-column>
      <el-table-column prop="studentname" header-align="center" align="left" label="学员姓名">
      </el-table-column>
      <el-table-column prop="courseName" header-align="center" align="left" label="课程">
      </el-table-column>
      <el-table-column prop="studentage" header-align="center" align="left" label="学员生日" width="110">
      </el-table-column>
      <el-table-column sortable="custom" prop="duetime" header-align="center" align="left" label="到期时间" width="160"></el-table-column>
      <el-table-column sortable="custom" prop="createtime" header-align="center"  width="160" align="left" label="创建时间"></el-table-column>
      <el-table-column prop="studentmather" header-align="center" align="left" label="家长姓名">
      </el-table-column>
      <el-table-column prop="matherphone" header-align="center" align="left" label="家长电话" width="110">
      </el-table-column>
      <!--<el-table-column-->
      <!--prop="studentfather"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="学生爸">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
      <!--prop="fatherphone"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="学生爸电话">-->
      <!--</el-table-column>-->
      <!-- <el-table-column prop="other" header-align="center" width="105px" align="left" label="应急联系人">
      </el-table-column>
      <el-table-column prop="otherphone" header-align="center" align="left" label="应急电话" width="110">
      </el-table-column> -->
      <!--<el-table-column-->
      <!--prop="male"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="学生性别">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
      <!--prop="studentpic"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="学生照片">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
      <!--prop="residualintegral"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="剩余积分">-->
      <!--</el-table-column>-->
      <el-table-column prop="cardtypeName" header-align="center" align="left" label="会员卡类型" width="150">
      </el-table-column>
      <!--<el-table-column-->
      <!--prop="cardstatus"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="会员卡状态">-->
      <!--</el-table-column>-->
      <el-table-column prop="cardnum" header-align="center" align="left" label="会员卡号" width="100">
      </el-table-column>
      <el-table-column prop="giftequipment" header-align="center" align="left" label="装备" width="130">
      </el-table-column>
      <el-table-column prop="residualclasshour" header-align="center" align="left" label="课时">
      </el-table-column>
      <el-table-column prop="payment" header-align="center" align="left" label="学员缴费">
      </el-table-column>
      <el-table-column prop="residualintegral" header-align="center" align="left" label="积分">
      </el-table-column>
			<!--
      <el-table-column prop="remark" header-align="center" align="center" label="备注">
      </el-table-column>
			-->
      <!--  :sort-method="sortByDate"  这段代码是自定义的排序方法 -->

      <!--<el-table-column-->
      <!--prop="createtime"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="新增时间">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
      <!--prop="updatetime"-->
      <!--header-align="center"-->
      <!--align="center"-->
      <!--label="修改时间">-->
      <!--</el-table-column>-->
      <el-table-column fixed="right" header-align="center" align="left" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="signHandle(scope.row.id)">签到</el-button>
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button><br>
          <el-button type="text" size="small" @click="informationHandle(scope.row.id)">详情</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  page-sizes:每页显示个数选择器的设置
          page-size:每页显示条目个数
          total:总条目数
          layout:组件布局，子组件名用逗号分隔
          pagination:页码器（貌似代表的element的整个分页组件，里面可以配置相关功能）
          total:总条目数
           @size-change:每页的条数改变后触发该函数
           @current-change:切换页码后触发
      -->
    <el-pagination
     @size-change="sizeChangeHandle"
     @current-change="currentChangeHandle"
     :current-page="pageIndex"
     :page-sizes="[10, 20, 50, 100]"
     :page-size="pageSize"
     :total="totalPage"
     layout="total, sizes, prev , pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
    v-if="addOrUpdateVisible"
    ref="addOrUpdate"
    @refreshDataList="getDataList">
    </add-or-update>
    <information
    v-if="informationVisible"
    ref="information"
    @refreshDataList="getDataList">
    </information>
    <student-upload
    v-if="studentUploadVisible"
    ref="studentUpload"
    @refreshDataList="getDataList">
    </student-upload>
    <sign
    v-if="signVisible"
    ref="sign"
    @refreshDataList="getDataList">
    </sign>
  </div>
</template>

<script>
  import AddOrUpdate from './student-add-or-update'
  import Information from './student-information'
  import StudentUpload from './student-upload'
  import Sign from './student-sign'
  export default {
    data () {
      return {
        dataForm: {
          key: '',
          tel: '',
          selectshopid: '',
          selectcourseid: ''
        },
        shopids: '',
        males: [{
          'name': '男',
          'id': 1
        }, {
          'name': '女',
          'id': 0
        }],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        informationVisible: false,
        studentUploadVisible: false,
        signVisible: false,
        cardtypeInfo: '',
        urltoken: this.$cookie.get('token'),
        courseList: []
      }
    },
    components: {
      AddOrUpdate,
      Information,
      StudentUpload,
      Sign
    },
    activated () {
      this.getTeacherInfo()
    },
    methods: {
      // 获取老师的权限
      getTeacherInfo () {
        var userId = this.$store.state.user.id
        this.$http({
          url: this.$http.adornUrl('/business/student/queryTeacherLogin'),
          method: 'get',
          params: {
            'userId': userId
          }
        }).then(({
          data
        }) => {
          if (data.teacherInfo == null) {
            this.getDataList()
            this.getShopInfo()
          } else {
            this.dataForm.selectshopid = data.teacherInfo.shopId
            this.getDataList()
            this.getShopInfo()
          }
        })
      },
      // 获取数据列表
      getDataList (val) {
        if (val) {
          this.pageIndex = 1
        }
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/business/student/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'tel': this.dataForm.tel,
            'selectshopid': this.dataForm.selectshopid,
            'selectcourseid': this.dataForm.selectcourseid
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list // 列表
            this.totalPage = data.page.totalCount // 全部条目数
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          // for (var i = 0; i < data.page.list.length; i++) {
          //   this.dataForm.cardtypeInfo = data.page.list[i].cardtype
          //   this.dataForm.maleInfo = data.page.list[i].male
          //   this.dataForm.shopid = data.page.list[i].shopid
          //   this.getMemberCardN(i)
          //   this.getShopName(i)
          //   for (var j = 0; j < 2; j++) {
          //     if (this.dataForm.maleInfo === this.males[j].id) {
          //       this.dataList[i].male = this.males[j].name
          //     }
          //   }
          // }
          this.dataListLoading = false
        })
      },
      roloadDataList () {
        if (this.dataForm.selectshopid) {
          this.dataForm.selectshopid = ''
        }
        this.dataForm.key = ''
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 批量导入学员
      studentupload () {
        this.studentUploadVisible = true
        this.$nextTick(() => {
          this.$refs.studentUpload.init()
        })
      },
      // 详细
      informationHandle (id) {
        this.informationVisible = true
        this.$nextTick(() => {
          this.$refs.information.init(id)
        })
      },
      // 弹出签到信息，进行学生签到操作
      signHandle (id) {
        this.signVisible = true
        this.$nextTick(() => {
          this.$refs.sign.init(id)
        })
      },
      // 获取会员卡的信息
      // getMemberCardN (i) {
      //   this.$http({
      //     url: this.$http.adornUrl(`/business/membercard/getMemberCardN`),
      //     method: 'get',
      //     params: {'id': this.dataForm.cardtypeInfo}
      //   }).then(({data}) => {
      //     if (data.code !== 500) {
      //       this.dataList[i].cardtype = data
      //     }
      //   })
      // },
      // 获取某个分校名称，回显
      // getShopName (i) {
      //   this.$http({
      //     url: this.$http.adornUrl(`/business/membercard/getShopName`),
      //     method: 'get',
      //     params: {'id': this.dataForm.shopid}
      //   }).then(({data}) => {
      //     if (data.code !== 500) {
      //       this.dataList[i].shopid = data
      //     }
      //   })
      // },
      // 获取分校信息-列表
      getShopInfo () {
        this.$http({
          url: this.$http.adornUrl('/business/student/getShopInfo'),
          mothod: 'get',
          params: {
            'shopId': ''
          }
        }).then(({
          data
        }) => {
          this.shopids = data.list
        })
      },
      changeShop (shopId) {
        this.$http({
          url: this.$http.adornUrl('/business/course/list'),
          mothod: 'get',
          params: {
            'shopId': shopId,
            'page': 1,
            'limit': 100
          }
        }).then(({
          data
        }) => {
          this.courseList = data.page.list
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/business/student/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList(1)
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 下载导入模板文件
      download () {
        window.location.href = '../file/student.xlsx'
      },
      /**
       * @param {Object} column
       * @param {Object} val2
       * 根据创建时间排序
       */
      // 获取数据列表
      sortByCreateTime (column, val2) {
        if (column.prop === 'createtime' || column.prop === 'duetime') {
          if (column.order === 'descending' || column.order === 'ascending') {
            if (val2) {
              this.pageIndex = 1
            }
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl('/business/student/list'),
              method: 'get',
              params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'key': this.dataForm.key,
                'tel': this.dataForm.tel,
                'selectshopid': this.dataForm.selectshopid,
                'sortColumn': column.prop,
                'sortType': column.order
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                // 列表
                this.dataList = data.page.list
                // 全部条目数
                this.totalPage = data.page.totalCount
              } else {
                this.dataList = []
                this.totalPage = 0
              }
              this.dataListLoading = false
            })
          }
        }
      },
        /**
         *导出Excel表格
         */
      exportExcel () {
        this.$confirm('确定导出？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          location.href = 'http://localhost:8080/child-education/business/exportExcel/export?token=' + this.urltoken
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log('响应成功')
          } else {
            console.log('响应失败')
          }
        })
      }
    }
  }
</script>
